<template>
  <view class="augur-ai-container">
    <e-navbar leftTitle="易小语AI占卜" :showBack="false"></e-navbar>
    <view class="augur-body">
      <view class="augur-body_row user-info">
        <view class="left-label font-28 pingfang-heavy" v-if="userinfo">{{userinfo.nickname || ''}}</view>
        <view class="right-content">
          <text class="m-l-40" v-if="userinfo">{{userinfo.gender || ''}}</text>
          <text v-if="augurDate.shengXiao != undefined">{{augurDate.shengXiao || '--'}}</text>
          <text v-if="augurDate.age != undefined">{{augurDate.age || '0'}}</text>
        </view>
      </view>
      <view class="augur-body_row bg-white">
        <view class="left-label">公历</view>
        <view class="right-content">{{ augurDate.solarDate }}</view>
      </view>
      <view class="augur-body_row">
        <view class="left-label">农历</view>
        <view class="right-content">{{ augurDate.lunarDate }}</view>
      </view>
      <view class="augur-body_row bg-white">
        <view class="left-label">司令</view>
        <view class="right-content">{{ augurDate.siLing }}</view>
      </view>
      <view class="augur-body_row">
        <view class="left-label">日期</view>
        <view class="right-content flex-1">
          <view class="flex-box flex col-center row-between">
            <view v-for="(item,index) in timeList" :key="index">{{item}}</view>
          </view>
        </view>
      </view>
      <view class="augur-body_row bg-white">
        <view class="left-label">十神</view>
        <view class="right-content flex-1">
          <view class="flex-box flex col-center row-between">
            <view v-for="(item,index) in augurDate.shiShen" :key="index">{{item}}</view>
          </view>
        </view>
      </view>
      <view class="augur-body_row bg-white pt-0 pb-0">
        <view class="left-label">天干</view>
        <view class="right-content flex-1">
          <view class="flex-box flex col-center row-between">
            <view style="font-size: 48rpx" :class="[typeColor(item.type)]" v-for="(item,index) in augurDate.tianGan" :key="index">{{item.title}}</view>
          </view>
        </view>
      </view>
      <view class="augur-body_row bg-white pt-0 p-b-10">
        <view class="left-label">地支</view>
        <view class="right-content flex-1">
          <view class="flex-box flex col-center row-between">
            <view style="font-size: 48rpx" :class="[typeColor(item.type)]" v-for="(item,index) in augurDate.diZhi" :key="index">{{item.title}}</view>
          </view>
        </view>
      </view>
      <view class="augur-body_row align-items-top">
        <view class="left-label">藏干</view>
        <view class="right-content flex-1">
          <view class="flex-box flex row-between">
            <view v-for="(item,index) in augurDate.zangGan" :key="index">
              <view class="m-b-6" v-for="(citem,cindex) in item" :key="cindex">
                <text class="m-r-10" :class="[zangganColor(citem.slice(0,1))]">{{citem.slice(0,1)}}</text>
                <text>{{citem.slice(1)}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="augur-body_row bg-white">
        <view class="left-label">地势</view>
        <view class="right-content flex-1">
          <view class="flex-box flex col-center row-between">
            <view class="text-999" v-for="(item,index) in augurDate.diShi" :key="index">{{item}}</view>
          </view>
        </view>
      </view>
      <view class="augur-body_row bg-white pt-0 pb-0">
        <view class="left-label">空亡</view>
        <view class="right-content flex-1">
          <view class="flex-box flex col-center row-between">
            <view class="text-999" v-for="(item,index) in augurDate.kongWang" :key="index">{{item}}</view>
          </view>
        </view>
      </view>
      <view class="augur-body_row bg-white">
        <view class="left-label">纳音</view>
        <view class="right-content flex-1">
          <view class="flex-box flex col-center row-between">
            <view class="text-999" v-for="(item,index) in augurDate.naYin" :key="index">{{item}}</view>
          </view>
        </view>
      </view>
      <view class="augur-body_row align-items-top" style="padding-bottom: 0">
        <view class="left-label">节气</view>
        <view class="right-content" v-if="augurDate.jieQi">
          <view class="m-b-6">{{ augurDate.jieQi.prevJieQi }}</view>
          <view>{{ augurDate.jieQi.nextJieQi }}</view>
        </view>
      </view>
      <view class="augur-body_row">
        <view class="left-label">起大运周岁</view>
        <view class="right-content">
          <view>{{ augurDate.qiDayun }}</view>
        </view>
      </view>
      <view class="dayun-row flex col-center row-between bg-white">
        <view class="text-999">大运</view>
        <view v-for="(item,index) in augurDate.daYun" :key="index">{{item}}</view>
      </view>
      <view class="liunian-row bg-white m-t-20">
        <view class="liunian-title flex-col col-center row-between">
          <view class="time-text">起始</view>
          <view class="p-l-10 p-r-10 font-38 text-999 pingfang-heavy" style="line-height: 60rpx">流年</view>
          <view class="time-text">起始</view>
        </view>
        <!--<view class="liunian-content" v-for="(item,index) in liunian" :key="index">-->
        <!--  <view class="time-text">{{item.year1}}</view>-->
        <!--  <view v-for="(citem,cindex) in item.list" :key="cindex">{{citem}}</view>-->
        <!--  <view class="time-text">{{item.year2}}</view>-->
        <!--</view>-->
        <view class="liunian-right" v-if="augurDate.liuNian">
          <view class="liunian-col">
            <view class="time-text" v-for="(item,index) in augurDate.liuNian.firstYear" :key="index">{{item}}</view>
          </view>
          <view class="liunian-col">
            <view class="" v-for="(item,index) in augurDate.liuNian.liuNianArr" :key="index">
              <view v-for="(citem, cindex) in item" :key="cindex">{{citem.ganzhi}}</view>
            </view>
          </view>
          <view class="liunian-col">
            <view class="time-text" v-for="(item,index) in augurDate.liuNian.lastYear" :key="index">{{item}}</view>
          </view>
        </view>
      </view>
      <view class="taiyuan-row bg-white m-t-20">
        <view class="taiyaun-item flex col-center" v-for="(item,index) in augurDate.taiYuan" :key="index">
          <view class="taiyuan-title m-r-10">{{item.title}}</view>
          <view class="">
            <view>{{ item.value }}</view>
            <view class="text-666">{{ item.valueSub }}</view>
          </view>
        </view>
      </view>
      <view class="jishen-row bg-white m-t-20">
        <view class="jishen-title m-b-20">吉神凶煞</view>
        <view class="flex col-center m-b-4" v-for="(item,index) in augurDate.jiShenXiongSha" :key="index">
          <view class="jishen-title m-r-16">{{ getJishenTItle(index) }}:</view>
          <view class="m-r-16" v-for="(citem, cindex) in item" :key="cindex">{{ citem }}</view>
        </view>
      </view>
    </view>
    <u-gap height="30"></u-gap>
    <e-tabbar :current="2"></e-tabbar>
  </view>
</template>

<script>
let app = getApp();
import { getCalendarDate, getAiZangGan } from "@/common/utils";
export default {
  data() {
    return {
      timeList:['年柱','月柱','日柱','时柱'],
      shishen:['偏财','偏印','元女','偏印'],
      tiangan:['壬','丙','戊','丙'],
      dizhih:['申','午','寅','辰'],
      zanggan:[
        ['庚食神','壬偏财','戊比肩'],
        ['丁正印','己劫财'],
        ['甲七杀','丙偏印','戊比肩'],
        ['戊比肩','乙正官','癸正财'],
      ],
      dishi:['病','帝旺','长生','冠带'],
      // kongwang:['','','',''],
      kongwang:['戌亥','寅卯','申酉','子丑'],
      nayin:['剑锋金','天河水','城墙土','沙中土'],
      dayun:['乙巳','甲辰','癸卯','壬寅','辛丑','庚子','己亥','戊戌'],
      liunian:[
        {
          year1: '2001',
          year2: '2010',
          list:["辛巳", "壬午", "癸未", "甲申", "乙酉", "辛巳", "壬午", "癸未", "甲申", "乙酉"],
        },
        {
          year1: '2011',
          year2: '2020',
          list:["辛卯", "壬辰", "癸巳", "甲午", "乙未", "辛卯", "壬辰", "癸巳", "甲午", "乙未"],
        },
        {
          year1: '2021',
          year2: '2030',
          list:["辛丑", "壬寅", "癸卯", "壬寅", "辛丑", "辛丑", "壬寅", "癸卯", "壬寅", "辛丑"],
        },
        {
          year1: '2031',
          year2: '2040',
          list:["辛亥", "壬子", "癸丑", "壬子", "癸丑", "辛亥", "壬子", "癸丑", "壬子", "癸丑"],
        },
        {
          year1: '2041',
          year2: '2050',
          list:["辛酉", "壬戌", "癸亥", "壬成", "癸亥", "辛酉", "壬成", "癸亥", "壬成", "癸亥"],
        },
        {
          year1: '2051',
          year2: '2060',
          list:["辛未", "壬申", "癸酉", "壬申", "癸酉", "辛未", "壬申", "癸酉", "壬申", "癸酉"],
        },
        {
          year1: '2061',
          year2: '2070',
          list:["辛巳", "壬午", "癸未", "壬午", "癸未", "辛巳", "壬午", "癸未", "壬午", "癸未"],
        },
        {
          year1: '2071',
          year2: '2080',
          list:["辛卯", "壬辰", "癸已", "壬辰", "癸巳", "辛卯", "壬辰", "癸巳", "壬辰", "癸已"],
        },
      ],
      userinfo:null,
      augurDate:{}, // 时间日期对象
    };
  },
  computed:{
    // 天干地址文字颜色
    typeColor(){
      return function(type) {
        let str = '';
        switch(type){
          case '金': //
            str = 'yellow-color';
            break
          case '木': //
            str = 'green-color';
            break
          case '水': //
            str = 'blue-color';
            break
          case '火': //
            str = 'red-color';
            break
          case '土': //
            str = 'brown-color';
            break
        }
        return str;
      };
    },
    // 藏干文字第一个字 颜色
    zangganColor(){
      return function(title){
        let str = '';
        // 属木
        if(title == '庚' || title == '辛' || title == '申' || title == '酉'){
          str = 'yellow-color';
        }else if(title == '甲' || title == '乙' || title == '寅' || title == '卯'){
          str = 'green-color';
        }else if(title == '壬' || title == '癸' || title == '亥' || title == '子'){
          str = 'blue-color';
        }else if(title == '丙' || title == '丁' || title == '巳' || title == '午'){
          str = 'red-color';
        }else if(title == '戊' || title == '己' || title == '丑' || title == '辰' || title == '未' || title == '戌'){
          str = 'brown-color';
        }
        return str;
      }
    },
    getJishenTItle(){
      return function (index){
        switch (index){
          case 0:
            return "年柱";
          case 1:
            return "月柱";
          case 2:
            return "日柱";
          case 3:
            return "时柱";
        }
      }
    }
  },
  onShow() {
    // this.augurDate = getCalendarDate('1996-11-02 9:10:00');
    // console.log('ccccc',this.augurDate);
    this.getUserInfo();
  },
  methods: {
    async getUserInfo(){
      app.getMineInfo().then(async (res)=>{
        this.userinfo = res;
        app.isCompleteInfo();
        if(this.userinfo){
          this.augurDate = await getCalendarDate({
						date:this.$u.timeFormat(this.userinfo.birthday, 'yyyy-mm-dd hh:MM:ss'),
            shenShaParams: {
              // isShenSha: true,
              day: this.$u.timeFormat(this.userinfo.birthday, "yyyy-mm-dd hh:MM:ss"),
              sex: this.userinfo.gender === "男" ? 1 : 0,
              name: this.userinfo.nickname,
            }
					});
          console.log('ccccc',this.augurDate);
          getAiZangGan(this.augurDate.zangGan);
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
  .augur-ai-container{
    .pt-0{
      padding-top: 0rpx !important;
    }
    .pb-0{
      padding-bottom: 0rpx !important;
    }
    .align-items-top{
      align-items: flex-start !important;
    }

    .augur-body{
      font-size: 26rpx;
      color: #000;
      .user-info{
        .left-label{
          color: #282828 !important;
        }
        text{
          margin-right: 70rpx;
          color: #282828 !important;
        }
      }
      &_row{
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        .left-label{
          color: #999;
          margin-right: 30rpx;
        }
        .flex-box{
          padding-left: 36rpx;
          //padding-right: 30rpx;
          >view{
            width: calc(100% / 4);
            text-align: center;
          }
        }
      }
      .dayun-row{
        >view:not(:last-child){
          border-right: 1rpx solid #EEEFF1;
        }
        >view{
          width: calc(100% / 9);
          padding:20rpx 30rpx;
          font-family: 'pingfang-heavy';
          line-height: 44rpx;
        }
      }
      .liunian-row{
        display: flex;
        align-items: stretch;
        padding: 6rpx 0;
        >view{
          .time-text{
            color: #999;
          }
          width: calc(100% / 9);
          text-align: center;

        }
        .liunian-content,.liunian-title{
          >view{
            padding: 6rpx 0;
          }
        }
        .liunian-right{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          .liunian-col{
            display: flex;
            >view{
              width: calc(100% / 8);
            }
            view{
              padding: 6rpx 0;
            }
          }
        }
      }
      .taiyuan-row{
        display: flex;
        align-items: center;
        padding: 20rpx;
        .taiyaun-item{
          width: calc(100% / 3);
          .taiyuan-title{
            width: 46rpx;
            border: 1px solid #5a6cb2;
            text-align: center;
            border-radius: 4rpx;
            color: #5a6cb2;
          }
        }
      }
      .jishen-row{
        padding: 20rpx;
        .jishen-title{
          color: #5a6cb2;
        }
      }
    }
  }
</style>
